import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput, PixelRatio, Alert } from "react-native";
import { style } from '../../../../../theme/style';
import Utils from '../../../../../utils/utils';
import { offerStyle } from './offerStyle';
import { initDate, showMap } from './offerMap';
const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;


export class GoodsRowItem extends Component {

	constructor(props) {
		super(props);
		let { data } = props || {};

		this.state = {
			data: data
		}
	}

	componentWillReceiveProps(props) {
		let { data } = props || {};
		this.setState({
			data: data
		})
	}

	//input
	_renderInput = () => {
		let { event, style, notAdd } = this.props || {};
		let { data } = this.state || {};
		let { require, title, unit, placeholder, defaultValue, id, keyboardType } = data || {};
		let { onInputChange, onInputOnBlur } = event || {};
		let { inputStyle } = style || {};
		return (
			<View style={[styles.goodsItem, notAdd ? offerStyle.notAdd : null]}>
				<View style={offerStyle.goodsTitleBox}>
					{require ? <Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text> : null}
					<Text style={[offerStyle.fontSize, offerStyle.goodsTitle]}>{title}</Text>
				</View>
				<View style={styles.goodsBodyView}>
					<TextInput
						style={[styles.goodsInput, inputStyle]}
						editable={!notAdd}
						defaultValue={Utils.numberToString(defaultValue)}
						placeholder={placeholder || '请输入'}
						placeholderTextColor={"#aaa"}
						underlineColorAndroid='transparent'
						keyboardType={keyboardType || 'numeric'}
						onBlur={() => {
							onInputOnBlur && onInputOnBlur(id);
						}}
						onChangeText={(value) => {
							onInputChange && onInputChange({ [id]: value })
						}} />
					{unit ? <Text style={[offerStyle.fontSize]}>{unit}</Text> : null}
				</View>
			</View>
		)
	}



	//初始化 价格类型的字段
	_priceInit = () => {
		return {}
	}



	//交验价格类型是否一致
	_goodsSame = (priceData) => {
		console.log('priceData11', priceData)
		let { allGoodsData, notAdd } = this.props || {};
		if (notAdd) return;  //不能修改
		let { goodsData } = allGoodsData || {};
		let isSame = false;
		goodsData.forEach(item => {
			if (item.priceType != priceData.priceType) isSame = true;
		})
		if (goodsData.length > 1 && isSame) {
			Alert.alert('价格类型切换提示', `您所选的价格类型和其他商品不一致,将会清空其他商品的价格类型相关数据`, [
				{ text: '取消', onPress: () => { console.log('取消') } },
				{ text: '好', onPress: () => { priceData.target = priceData.priceType; this._priceTypeFn({ ...priceData, ...initDate.priceType }) } }
			]);
		} else {
			this._priceTypeFn({ ...priceData, ...initDate.priceType });
		}
	}


	//价格类型 / 升贴水
	_priceTypeFn = (priceData) => {
		console.log('priceData-999999', priceData)
		let { data } = this.state;
		let { event } = this.props || {};
		let { onInputChange } = event || {};
		//data.priceType = priceData.priceType;

		for (var key in priceData) {
			data[key] = priceData[key]
		}
		this.setState({
			data
		}, () => {
			onInputChange && onInputChange(priceData);
		})
	}

	//priceType
	_renderPriceType = () => {
		let { data } = this.state || {};
		let { dictionaryData, notAdd } = this.props || {};
		let { require, title, priceType } = data || {};
		return (
			<View style={[styles.goodsItem, { borderBottomWidth: 0 }, notAdd ? offerStyle.notAdd : null]}>
				<View style={[offerStyle.goodsTitleBox]}>
					{require ? <Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text> : null}
					<Text style={[offerStyle.fontSize, offerStyle.goodsTitle]}>{title}</Text>
				</View>
				<View style={styles.priceTypeBox}>
					{
						dictionaryData && dictionaryData.map((item, index) => {
							return (
								<View key={index} style={[styles.priceType, (priceType == item.dictKey ? styles.priceTypeActive : null)]}>
									<Text style={styles.priceText} onPress={() => { if (priceType == item.dictKey) { return } this._goodsSame({ priceType: item.dictKey }); }}>{item.dictName}</Text>
								</View>
							)
						})
					}
				</View>
			</View>
		)
	}

	// 升贴 Stick
	_renderStick = () => {
		let { event } = this.props;
		let { data } = this.state || {};
		let { id, symbol, defaultValue, bizModel } = data || {};
		let { onInputChange } = event || {};
		if (Utils.isNumber(defaultValue)) {
			defaultValue = Math.abs(defaultValue);
		}
		return (
			<View style={styles.stickBox}>
				<View style={[styles.stickBoxOuter, symbol ? null : styles.stickBoxBtnActive]}>
					<Text style={[styles.stickBoxBtn]} onPress={() => { this._priceTypeFn({ symbol: false }) }}>贴</Text>
				</View>
				<View style={[styles.stickBoxOuter, symbol ? styles.stickBoxBtnActive : null]}>
					<Text style={[styles.stickBoxBtn]} onPress={() => { this._priceTypeFn({ symbol: true }) }}>升</Text>
				</View>
				{
					showMap.isShowTip(bizModel) ? <View style={styles.beforeAddBox}>
						<Text style={[styles.beforeAdd]}>（*底价）</Text>
					</View> : null
				}
				<View style={styles.stickWrite}>
					<TextInput
						style={styles.stickInput}
						defaultValue={Utils.numberToString(defaultValue)}
						placeholder={'0.00'}
						placeholderTextColor={"#aaa"}
						keyboardType={"numeric"}
						underlineColorAndroid='transparent'
						onChangeText={(value) => {
							console.log('input', value)
							onInputChange && onInputChange({ [id]: value })
						}} />
					<Text style={[offerStyle.fontSize, { marginRight: 9 * scale }]}>元/吨</Text>
				</View>
			</View>
		)
	}

	//scope 范围
	_renderScope = () => {
		let { event, notAdd } = this.props;
		let { data } = this.state || {};
		let { require, title, keyStart, keyEnd, minBaseValue, maxBaseValue } = data || {};
		let { onInputChange } = event || {};
		return (
			<View style={[styles.stickBox, notAdd ? offerStyle.notAdd : null]}>
				<View style={[offerStyle.goodsTitleBox, { width: 100 * scale }]}>
					{require ? <Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text> : null}
					<Text style={[offerStyle.fontSize]}>{title}</Text>
				</View>
				<View style={styles.scopeBox}>
					<TextInput
						style={styles.scopeInput}
						defaultValue={Utils.numberToString(minBaseValue)}
						editable={!notAdd}
						placeholder={'0.00'}
						placeholderTextColor={"#aaa"}
						keyboardType={"numeric"}
						underlineColorAndroid='transparent'
						onChangeText={(value) => {
							onInputChange && onInputChange({ [keyStart]: value });
						}} />
					<Text style={[offerStyle.fontSize, { paddingHorizontal: 5 * scale }]}>至</Text>
					<TextInput
						style={styles.scopeInput}
						defaultValue={Utils.numberToString(maxBaseValue)}
						editable={!notAdd}
						placeholder={'0.00'}
						placeholderTextColor={"#aaa"}
						keyboardType={"numeric"}
						underlineColorAndroid='transparent'
						onChangeText={(value) => {
							onInputChange && onInputChange({ [keyEnd]: value });
						}} />
					<Text style={[offerStyle.fontSize, { paddingLeft: 5 * scale }]}>吨</Text>
				</View>
			</View>
		)
	}

	render() {
		let { data } = this.state || {};
		let { type } = data || {};
		if (type === 'priceType') {
			return this._renderPriceType();
		} else if (type === 'Stick') {
			return this._renderStick();
		} else if (type === "Scope") {
			return this._renderScope();
		} else {
			return this._renderInput();
		}
	}
}

const styles = StyleSheet.create({
	goodsBox: {
		backgroundColor: style.color.white,
		borderRadius: 5 * scale,
		marginBottom: 25 * scale
	},
	goodsItem: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderBottomColor: '#D8D8D8',
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		paddingHorizontal: 10 * scale,
		height: 38 * scale
	},

	goodsBodyView: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
	},
	goodsRemove: {
		color: '#E02020',
		marginLeft: 10 * scale,
		paddingHorizontal: 10 * scale,
		paddingVertical: 5 * scale
	},
	goodsTitle: {
		width: 165 * scale
	},
	goodsInput: {
		color: '#000',
		fontWeight: 'bold',
		width: 125 * scale,
		height: 26 * scale,
		paddingHorizontal: 5 * scale,
		textAlign: 'right',
		paddingVertical: 0
		//opacity: .5
	},
	priceTypeBox: {
		flexDirection: 'row',
	},
	priceType: {
		backgroundColor: style.color.themeColor,
		borderRadius: 10 * scale,
		justifyContent: 'center',
		alignItems: 'center',
		marginLeft: 8 * scale,
		opacity: .5
	},
	priceTypeActive: {
		opacity: 1
	},
	priceText: {
		width: 60 * scale,
		height: 21 * scale,
		lineHeight: 20 * scale,
		color: style.color.white,
		fontSize: 12 * scale,
		textAlign: 'center'
	},
	priceTypeText: {
		color: style.color.white,
		fontSize: 12 * scale
	},
	stickBox: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 10 * scale,
		paddingVertical: 10 * scale,
		position: "relative"
	},
	stickBoxOuter: {
		opacity: 0.5
	},
	stickBoxBtn: {
		width: 22 * scale,
		height: 22 * scale,
		backgroundColor: style.color.themeColor,
		lineHeight: 21 * scale,
		textAlign: 'center',
		color: '#fff',
		marginLeft: 15 * scale,
	},
	stickBoxBtnActive: {
		opacity: 1
	},
	stickWrite: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		width: 231 * scale,
		marginLeft: 20 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderBottomColor: '#D8D8D8'
	},
	stickInput: {
		width: 200 * scale,
		height: 26 * scale,
		paddingHorizontal: 5 * scale,
		textAlign: 'right',
		fontWeight: 'bold',
		color: '#000',
		paddingVertical: 0
	},
	scopeBox: {
		flexDirection: 'row',
		alignItems: 'center',
		width: 205 * scale,
		justifyContent: 'flex-end',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderBottomColor: '#D8D8D8',
		height: 38 * scale
	},
	scopeInput: {
		width: 80 * scale,
		height: 26 * scale,
		paddingHorizontal: 5 * scale,
		textAlign: 'center',
		fontWeight: 'bold',
		color: '#000',
		paddingVertical: 0
	},
	beforeAddBox: {
		position: 'absolute',
		left: 90 * scale,
		top: 18 * scale
	},
	beforeAdd: {
		fontSize: 10 * scale,
		color: 'red'
	}
})